<template>
  <div class="product-list">
    <div class="page-header">
      <h3>商品列表</h3>
      <el-input
        v-model="searchKeyword"
        placeholder="搜索商品"
        style="width: 300px"
        clearable
        @input="handleSearch"
      >
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
    </div>

    <el-row :gutter="20" class="product-grid">
      <el-col
        v-for="product in filteredProducts"
        :key="product.id"
        :xs="24" :sm="12" :md="8" :lg="6"
        class="product-item"
      >
        <el-card :body-style="{ padding: '0px' }" shadow="hover">
          <div class="product-image">
            <img
              v-if="product.imageUrl"
              :src="product.imageUrl"
              :alt="product.name"
            />
            <div v-else class="no-image">
              <i class="el-icon-picture-outline"></i>
            </div>
          </div>
          <div class="product-info">
            <h4 class="product-name">{{ product.name }}</h4>
            <p class="product-desc">{{ product.description }}</p>
            <div class="product-meta">
              <span class="category">{{ product.categoryName }}</span>
              <span class="seller">{{ product.sellerName }}</span>
            </div>
            <div class="product-footer">
              <span class="points">{{ product.pointsRequired }} 积分</span>
              <el-button
                type="primary"
                size="small"
                :disabled="userPoints < product.pointsRequired"
                @click="handleExchange(product)"
              >
                兑换
              </el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 兑换确认对话框 -->
    <el-dialog
      title="确认兑换"
      :visible.sync="exchangeDialogVisible"
      width="400px"
      center
    >
      <div v-if="selectedProduct">
        <p>商品：{{ selectedProduct.name }}</p>
        <p>所需积分：{{ selectedProduct.pointsRequired }}</p>
        <p>您的积分：{{ userPoints }}</p>
        <p :style="{ color: userPoints >= selectedProduct.pointsRequired ? 'green' : 'red' }">
          {{ userPoints >= selectedProduct.pointsRequired ? '积分充足' : '积分不足' }}
        </p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="exchangeDialogVisible = false">取消</el-button>
        <el-button
          type="primary"
          :disabled="userPoints < selectedProduct.pointsRequired"
          @click="confirmExchange"
        >
          确认兑换
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ProductList',
  data() {
    return {
      products: [],
      filteredProducts: [],
      searchKeyword: '',
      exchangeDialogVisible: false,
      selectedProduct: null,
      userPoints: 5000, // 暂时使用固定值
      loading: false
    }
  },
  created() {
    this.loadProducts()
  },
  methods: {
    loadProducts() {
      this.loading = true
      this.$http.get('/products/online')
        .then(response => {
          if (response.data.code === 200) {
            this.products = response.data.data
            this.filteredProducts = this.products
          } else {
            this.$message.error(response.data.message || '加载商品失败')
          }
        })
        .catch(error => {
          console.error('加载商品失败:', error)
          this.$message.error('加载商品失败')
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleSearch() {
      if (!this.searchKeyword.trim()) {
        this.filteredProducts = this.products
      } else {
        const keyword = this.searchKeyword.toLowerCase()
        this.filteredProducts = this.products.filter(product =>
          product.name.toLowerCase().includes(keyword) ||
          product.description.toLowerCase().includes(keyword)
        )
      }
    },
    handleExchange(product) {
      this.selectedProduct = product
      this.exchangeDialogVisible = true
    },
    confirmExchange() {
      // 这里应该调用兑换API
      this.$message.success('兑换成功！')
      this.exchangeDialogVisible = false
      // 更新用户积分
      this.userPoints -= this.selectedProduct.pointsRequired
    }
  }
}
</script>

<style scoped>
.product-list {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.product-grid {
  margin: 0 -10px;
}

.product-item {
  padding: 10px;
}

.product-image {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  border-radius: 4px 4px 0 0;
  overflow: hidden;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.no-image {
  color: #c0c4cc;
  font-size: 48px;
}

.product-info {
  padding: 15px;
}

.product-name {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: bold;
  color: #303133;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-desc {
  margin: 0 0 10px 0;
  color: #909399;
  font-size: 14px;
  line-height: 1.4;
  height: 2.8em;
  overflow: hidden;
}

.product-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  font-size: 12px;
  color: #c0c4cc;
}

.product-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.points {
  font-size: 18px;
  font-weight: bold;
  color: #e74c3c;
}
</style>
